*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,body{
	height: 100%;
	font-family: "微软雅黑";
	overflow: hidden;
}
body{
	border: 1px solid #13227A;
	background-color: #5FA1E7;
}
/*启动页*/
.start{
	height: 100%;
	width: 100%;
	background-image: url(../img/56593b8c33928_1024.JPG);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	text-align: center;
}
.outclick{
	width: 70px;
	height: 70px;
	background-color: #13227A;
	border-radius: 40px;
	opacity: 0.5;
	position: absolute;
	bottom: 100px;
	left: 50%;
	margin-left: -35px;
}
.innerclick{
	width: 35px;
	height: 35px;
	background-color: #13227A;
	border-radius: 40px;
	opacity: 0.8;
	position: absolute;
	bottom: 117.5px;
	left: 50%;
	margin-left: -17.5px;
}
.fontclick{
	color: #fff;
	font-size: 32px;
	letter-spacing: 2px;
	position: absolute;
	bottom: 195px;
	left: 50%;
	margin-left: -68px;
	text-shadow: 0 5px 3px #EA2000;
	
	transform: skew(-30deg,0deg);
	-ms-transform: skew(-30deg,0deg);	/* IE 9 */
	-webkit-transform: skew(-30deg,0deg);	/* Safari and Chrome */
	-o-transform: skew(-30deg,0deg);	/* Opera */
	-moz-transform: skew(-30deg,0deg);	/* Firefox */
}
/*内页*/
.content{
	height: 100%;
	display: none;
}
#bimain{
	height: 100%;
}
#bimain>div{
	height: 100%;
	font-size: 30px;
	color: #EA2000;
	position: relative;
}
#bimain>div>p{
	position: absolute;
	top: 40px;
	left: 52px;
}
#bimain>div>.bgimg{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
#bimain>div:nth-child(1)>.bgimg{
	background-image: url(../img/春.jpg);
}
#bimain>div:nth-child(2)>.bgimg{
	background-image: url(../img/夏.jpg);
}
#bimain>div:nth-child(3)>.bgimg{
	background-image: url(../img/秋.jpg);
}
#bimain>div:nth-child(4)>.bgimg{
	background-image: url(../img/冬.jpg);
}
#bike{
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -75px;
	z-index: 10000;
}
.jiantou{
	font-size: 26px;
	color: #666;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -17.5px;
	display: none;
	z-index: 10000;
}
.jttip{
	letter-spacing: 1px;
	font-size: 13px;
	color: #888;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -37.5px;
	display: none;
	z-index: 10000;
}
/*控制按钮*/
#bikestop,#bikestart{
	position: absolute;
	left: 40px;
	z-index: 10000;
	border: none;
	font-size: 20px;
	width: 56px;
	height: 30px;
	line-height: ;
	padding: 3px 5px;
	border-radius: 10px;
	background-color: #FFCC99;
	outline: none;
}
#bikestop:active{
	box-shadow: -2px -2px 2px #666666;
}
#bikestart:active{
	box-shadow: -2px -2px 2px #666666;
}
#bikestop{
	top: 100px;
	color: #EA2000; 
}
#bikestart{
	top: 160px; 
	color: #2786E8;
}

#bgmusic{
	display: none;
}

#musiccon{
	position: absolute;
	right: 15px;
	width: 35px;
	z-index: 10000;
	outline: none;
	animation: bounce 1.1s;
	-moz-animation: bounce 1.1s;
	-webkit-animation: bounce 1.1s;
	-o-animation: bounce 1.1s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite; 
	animation-timing-function:ease-in-out;
	-webkit-animation-timing-function:ease-in-out;
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
}
.mcwing{
	width: 0;
	height: 81px;
	border: 1px solid #13227A;
	position: absolute;
	right: 31px;
	z-index: 10000;
	animation: wingjump 1.1s;
	-moz-animation: wingjump 1.1s;
	-webkit-animation: wingjump 1.1s;
	-o-animation: wingjump 1.1s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-timing-function:ease-in-out;
	-webkit-animation-timing-function:ease-in-out;
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
}

@-webkit-keyframes bounce {0%{top: -55px;} 100%{top: 60px;}}
@-webkit-keyframes wingjump{0%{top: -135px;} 100%{top: -20px;} }

/*球*/
/*@keyframes bounce{0%{top: 15px;} 0.01%{top: -35px;} 17%{top: 65px;} 32%{top: -25px;} 50%{top: 55px;} 66%{top: -1px;} 83%{top: 32px;} 100%{top: 15px;}}
@-moz-keyframes bounce{0%{top: 15px;} 0.01%{top: -35px;} 17%{top: 65px;} 32%{top: -25px;} 50%{top: 55px;} 66%{top: -1px;} 83%{top: 32px;} 100%{top: 15px;}}
@-webkit-keyframes bounce {0%{top: 15px;} 0.01%{top: -35px;} 17%{top: 65px;} 32%{top: -25px;} 50%{top: 55px;} 66%{top: -1px;} 83%{top: 32px;} 100%{top: 15px;}}
@-o-keyframes bounce {0%{top: 15px;} 0.01%{top: -35px;} 17%{top: 65px;} 32%{top: -25px;} 50%{top: 55px;} 66%{top: -1px;} 83%{top: 32px;} 100%{top: 15px;}}*/
/*线*/
/*@keyframes wingjump{0%{height: 16px;} 0.01%{height: 0;} 17%{height: 66px;} 32%{height: 0;} 50%{height: 52px;} 66%{height: 0;} 83%{height: 33px;} 100%{height: 16px;}}
@-moz-keyframes wingjump{0%{height: 16px;} 0.01%{height: 0;} 17%{height: 66px;} 32%{height: 0;} 50%{height: 52px;} 66%{height: 0;} 83%{height: 33px;} 100%{height: 16px;}}
@-webkit-keyframes wingjump{0%{height: 16px;} 0.01%{height: 0;} 17%{height: 66px;} 32%{height: 0;} 50%{height: 52px;} 66%{height: 0;} 83%{height: 33px;} 100%{height: 16px;}}
@-o-keyframes wingjump{0%{height: 16px;} 0.01%{height: 0;} 17%{height: 66px;} 32%{height: 0;} 50%{height: 52px;} 66%{height: 0;} 83%{height: 33px;} 100%{height: 16px;}}*/